<template>
  <div class="my">
    <el-card>
      <h2>我的需求/响应</h2>
      <el-tabs v-model="tab">
        <el-tab-pane label="我发布的需求" name="publish">
          <el-table :data="myPublish" style="width: 100%">
            <el-table-column prop="title" label="标题" />
            <el-table-column prop="type" label="类型" width="120" />
            <el-table-column prop="status" label="状态" width="100" />
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="我响应的需求" name="response">
          <el-table :data="myResponse" style="width: 100%">
            <el-table-column prop="title" label="标题" />
            <el-table-column prop="type" label="类型" width="120" />
            <el-table-column prop="status" label="状态" width="100" />
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script setup>
import { ref } from "vue";
const tab = ref("publish");
const myPublish = ref([{ title: "宠物猫寄养一周", type: "宠物照看", status: "已完成" }]);
const myResponse = ref([{ title: "二手iPhone出售", type: "商品买卖", status: "待响应" }]);
</script>
<style scoped>
.my {
  max-width: 800px;
  margin: 40px auto;
}
</style>
